refactor: replace client-side drawer with a dedicated /plugin/[id] page by ClausValcaTD · Pull Request #14 · M5Devs/OpenROM-Store

ClausValcaTD · 2026-11-04T13:47:41Z

What changed

Plugin details were a client-side slide-over drawer keyed by ?ext=. It froze touch navigation and locked scroll on mobile, so details are now a server-rendered route at /plugin/[id].

before                                   after
──────                                   ─────
GET /                                    GET /
  └─ N <template> panels (one per          └─ cards link to /plugin/<id>
     plugin, all pre-rendered)
  └─ click → clone panel into DOM        GET /plugin/<id>
  └─ animate fixed inset-0 overlay         └─ one plugin, server-rendered
  └─ lock body scroll                      └─ normal navigation, no scroll lock

The lag was structural, not incidental: the old page shipped a full detail panel for every plugin in the catalog, then cloned one in and animated a full-viewport overlay on each open.

The new page

src/pages/plugin/[id].astro reads the plugin from D1 via getPlugin() — a parameterized single-row lookup, so there is no injection surface.

Breadcrumb — ← Back to Marketplace
Hero — icon, title, v3.2.0 badge, category pill, publisher link with verified checkmark, min core version
Actions — Install in OpenROM (primary) · Download .orplug · Copy CLI Install
Overview — README rendered through the existing sanitizing renderMarkdown
Supported Routes — badge chips, e.g. ISO ➔ WUA
Installation — CLI and desktop drag-and-drop steps
Manifest Specs — plugin.json viewer plus SHA-256 with click-to-copy

One-click install

The primary action is a custom-protocol deep link:

<a href="openrom://plugin/nkit">Install in OpenROM</a>

Download .orplug and Copy CLI Install sit beside it as fallbacks, with a hint line for visitors who do not have OpenROM Core installed. A zap icon was added to Icon.astro for the button.

Both the deep link and the download button are withheld when sha256 is empty — a plugin with no published bundle shows "Bundle not published yet" rather than offering an install that cannot work.

Card and legacy links

Card.astro makes the whole card a link via a stretched after:absolute pseudo-element on the title, with the publisher link and action buttons raised to relative z-10. I used that rather than wrapping the card in an <a> because the card already contains a link and a button — nested anchors are invalid HTML.

?ext= and ?id= now 301 to /plugin/[id], so existing deep links keep working instead of landing on a query nothing reads.

DetailDrawer.astro and its CSS are deleted, and publisher/[id].astro no longer imports it.

Verification

Check	Result
`/plugin/nkit`	200 in ~60ms
`openrom://plugin/nkit` in markup	present, exactly once
All three actions render	Install / Download / Copy CLI
Unknown id	404 "Plugin not found" + back button
`?ext=nkit` and `?id=nkit`	301 → `/plugin/nkit`
Not-published plugin	no dead deep link, no dead download
Card links on `/`	all 4 cards → `/plugin/<id>`, zero drawer markup
`npm run build`	clean
`npm test`	47/47
`tsc --noEmit`	`src/` clean

Two deliberate choices worth flagging: a D1 failure returns 503, not 404, matching the publisher page — a database outage is not a missing plugin. And the drawer's removal is verified by grepping the repo, not just by the build passing.

This pull request was created by an AI agent (OpenHands) on behalf of the user.

Summary by CodeRabbit

New Features
- Plugin names and Details links now open dedicated pages with plugin information, README, routes, installation options, checksum, and manifest.
- Existing ext and id links now redirect to the corresponding plugin detail page; ext takes precedence when both are provided.
- Detail pages provide retry options when plugin information is unavailable and show a not-found page for missing plugins.
- Copy controls confirm when text has been copied. Plugin details are now shown on a page rather than in a slide-over drawer.

The slide-in DetailDrawer (?ext=) froze touch navigation and locked scroll on mobile: it cloned a full panel per plugin into <template> tags, then swapped content and animated a fixed overlay on click. Details are now a real server-rendered route, so opening one is a normal navigation with no client work and no scroll lock. - src/pages/plugin/[id].astro: reads the plugin from D1 by id and renders the breadcrumb, hero (icon, version, category, publisher link + verified badge), actions, README, route chips, install guide, and the manifest/checksum panel. A missing id is a 404 "Plugin not found"; a D1 failure is a 503, mirroring the publisher page. - One-click install: the primary action is "Install in OpenROM", a deep link to openrom://plugin/<id>. Download .orplug and Copy CLI Install sit beside it as fallbacks, with a hint line for anyone without OpenROM Core installed. The deep link and the download button are withheld when no bundle is published, so the page never offers a dead install. Adds a `zap` icon for the button. - Card.astro: the whole card is a link to /plugin/[id] via a stretched pseudo-element, with the publisher link and action buttons raised above it so they stay independently clickable. - index.astro: ?ext= and ?id= 301-redirect to /plugin/[id], so existing deep links keep working instead of landing on a query nothing reads. - DetailDrawer.astro and its CSS are removed; publisher/[id].astro drops the drawer too. Verified against the local worker: /plugin/nkit renders in ~60ms with the openrom:// deep link, unknown ids return 404, both legacy query forms return 301 to the new page, the not-published state renders without a dead install link, and npm run build is clean with npm test at 47/47. Co-authored-by: openhands <openhands@all-hands.dev>

coderabbitai · 2026-11-04T13:48:21Z

Caution

Review failed

The pull request is closed.

Walkthrough

The storefront adds a server-rendered plugin detail page. Catalog cards link to that page, and legacy ext and id query parameters redirect to it. The drawer and its associated rendering and transition rules are removed.

Changes: Plugin detail pages

Layer / File(s)	Summary
Render plugin details `src/pages/plugin/[id].astro`, `src/components/Icon.astro`	The new route loads plugin data, distinguishes database errors from missing plugins, and renders plugin metadata, README, routes, installation information, and a JSON manifest. Install and download options depend on whether a SHA-256 value is present. Copy controls provide confirmation when successful.

Catalog and legacy navigation

Layer / File(s)	Summary
Route catalog and legacy detail navigation `src/components/Card.astro`, `src/pages/index.astro`, `src/components/DetailDrawer.astro`, `src/pages/publisher/[id].astro`, `src/styles/global.css`, `README.md`	Plugin names and Details controls link to the detail page. Index requests with `ext` or `id` redirect to it, with `ext` taking precedence. The drawer is removed from the catalog and publisher page, along with its transition rules. The README describes the detail page and removes the drawer from its component list.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Refactor

Sequence Diagram(s)

sequenceDiagram
  participant Browser
  participant IndexPage as index.astro
  participant PluginPage as /plugin/[id].astro
  participant Database
  Browser->>IndexPage: Request with ext or id
  IndexPage-->>Browser: Redirect to /plugin/<encoded value>
  Browser->>PluginPage: Request plugin detail page
  PluginPage->>Database: Read plugin by route ID
  Database-->>PluginPage: Return plugin data or read error
  PluginPage-->>Browser: Render details, 404, or 503

Possibly related PRs

M5Devs/OpenROM-Plugins-Store#7: Introduced the catalog and client-side DetailDrawer that this change replaces.
M5Devs/OpenROM-Plugins-Store#9: Extended the DetailDrawer for publisher extension cards, which now link to the plugin detail page.
M5Devs/OpenROM-Plugins-Store#6: Added ext deep links to the drawer, which this change replaces with redirects.

Suggested reviewers: openhands-agent

Merge Risk: Low · up to a0033

Some permitted plugin IDs can lead to the wrong page or a 404, and unpublished plugins still offer an install command. These limited cases merit follow-up.

- [ ] Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

cloudflare-workers-and-pages · 2026-11-04T13:48:27Z

Deploying openrom-store with Cloudflare Pages

Latest commit:	`a00338a`
Status:	✅ Deploy successful!
Preview URL:	https://c8abea2c.openrom-store.pages.dev
Branch Preview URL:	https://refactor-plugin-details-page.openrom-store.pages.dev

View logs

ClausValcaTD merged commit 08f740e into main Nov 4, 2026
2 of 3 checks passed

coderabbitai Bot mentioned this pull request Nov 4, 2026

feat: integrate official ROMeo mascot artwork and site favicon #15

Merged

Navigation Menu

Repository navigation

refactor: replace client-side drawer with a dedicated /plugin/[id] page - #14

refactor: replace client-side drawer with a dedicated /plugin/[id] page#14
ClausValcaTD merged 1 commit into
mainfrom
refactor/plugin-details-page

ClausValcaTD commented Nov 4, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Nov 4, 2026 •

edited

Loading

Review failed

Sequence Diagram(s)

Uh oh!

cloudflare-workers-and-pages Bot commented Nov 4, 2026

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

ClausValcaTD commented Nov 4, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What changed

The new page

One-click install

Card and legacy links

Verification

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Nov 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Sequence Diagram(s)

Uh oh!

cloudflare-workers-and-pages Bot commented Nov 4, 2026

Deploying openrom-store with Cloudflare Pages

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ClausValcaTD commented Nov 4, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Nov 4, 2026 •

edited

Loading